<template>
  <div class="infoBox">
    <el-drawer
      :visible.sync="dialogVisible"
      title="业务流水"
      direction="rtl"
      :append-to-body="true"
      custom-class="demo-drawer"
      size="1000px"
      :modal-append-to-body="false"
      class="infoBox"
    >
      <div class="drawerContent">
        <el-table :data="tableData" border >
          <el-table-column type="expand">
            <template slot-scope="props">
              <div class="expand">
                <div style="margin-bottom: 15px;">
                  URL:{{ props.row.url }}
                </div>
                <div v-if="props.row.request">
                  <div class="title">
                    <span>请求参数</span>
                    <span class="copy-json-btn" @click="handleClipboard(props.row.request,$event)">
                      <i class="el-icon-document-copy" />
                      {{ $t('fuZhiJson') }}
                    </span>
                  </div>
                  <pre v-highlight class="log-block">
                      <code class="json" v-html="props.row.request" />
                  </pre>
                </div>
                <div v-if="props.row.response">
                  <div class="title">
                    <span>响应参数</span>
                    <span class="copy-json-btn" @click="handleClipboard(props.row.response,$event)">
                      <i class="el-icon-document-copy" />
                      {{ $t('fuZhiJson') }}
                    </span>
                  </div>
                  <pre v-highlight class="log-block">
                      <code class="json" v-html="props.row.response" />
                  </pre>
                </div>
                <div v-if="props.row.errorMsg">
                  <div class="title">
                    <span>错误信息</span>
                    <span class="copy-json-btn" @click="handleClipboard(props.row.errorMsg,$event)">
                      <i class="el-icon-document-copy" />
                      {{ $t('fuZhiJson') }}
                    </span>
                  </div>

                  <pre v-highlight class="log-block">
                      <code class="json" v-html="props.row.errorMsg" />
                  </pre>
                </div>
              </div>

            </template>
          </el-table-column>
          <el-table-column label="业务类型" prop="flowTypeDesc"/>
          <el-table-column label="业务编码" prop="flowCode" min-width="160"/>
          <el-table-column label="是否成功" prop="isSuccessDesc"/>
          <el-table-column label="创建时间" prop="createTime" min-width="160"/>
          <el-table-column label="错误码" prop="errorCode"/>
          <el-table-column label="接口" prop="actionTypeDesc"/>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {flowCodeApi} from '@/api/store';
import handleClipboard from '@/utils/clipboard';
export default {
  data() {
    return {
      dialogVisible:false,
      tableData:[]
    }
  },
  methods: {
    show(id){
      this.dialogVisible = true
      this.getInfo(id)
    },
    getInfo(id) {
      flowCodeApi(id).then(res=>{
        this.tableData = res.map(item=>{
          return {
            ...item,
            request:item.request?JSON.parse(item.request):'',
            response:item.response?JSON.parse(item.response):'',
            errorMsg:item.errorMsg?JSON.parse(item.errorMsg):''
          }
        })
      })
    },
    handleClipboard(text, event){
      handleClipboard(JSON.stringify(text), event)
    }
  }
};
</script>
<style scoped lang="scss">
.drawerContent{
  padding: 0 20px;
}

.expand{
  padding: 20px 20px 0;
  .title{
    display: flex;
    justify-content: space-between;
    .copy-json-btn{cursor: pointer;}
  }
}
</style>
